<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Request from '@/api/axios'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import type { Blog } from './type'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const blogs = ref<Blog[]>([])
const searchQuery = ref(route.query.keywords as string || '')

// 获取博客列表
const fetchBlogs = async () => {
    loading.value = true
    try {
        const response = await Request.get({ url: `/blog/list?keywords=${searchQuery.value}` })
        blogs.value = response.info
    } catch (err) {
        message.error('获取博客列表失败')
        console.error(err)
    } finally {
        loading.value = false
    }
}


onMounted(fetchBlogs)

// 过滤博客列表
const filteredBlogs = computed(() => {
    const query = searchQuery.value.toLowerCase()
    return blogs.value.filter(blog => {
        const matchesSearch = blog.title.toLowerCase().includes(query) ||
            blog.username.toLowerCase().includes(query) ||
            blog.tags.includes(query)
        return matchesSearch
    })
})

// 搜索博客
const handleSearch = () => {
    router.push({
        name: 'blog-list',
        query: { keywords: searchQuery.value },
        replace: true
    })
    fetchBlogs()
}

const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        width: '35%',
        ellipsis: true
    },
    {
        title: '作者',
        dataIndex: 'username',
        width: '15%',
        align: 'center'
    },
    {
        title: '标签',
        dataIndex: 'tags',
        width: '30%'
    },
    {
        title: '发布时间',
        dataIndex: 'created_at',
        width: '20%',
        align: 'center',
        sorter: (a: Blog, b: Blog) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
    }
]
</script>

<template>
    <div class="blog-list-container">
        <div class="header-container">
            <div class="left-section">
                <div class="search-box">
                    <a-input-search v-model:value="searchQuery" placeholder="搜索文章标题、作者或标签..."
                        @keyup.enter="handleSearch" @click.stop="handleSearch" />
                </div>
            </div>
        </div>

        <a-table :data-source="filteredBlogs" :columns="columns" :loading="loading" :pagination="{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
        }" class="custom-table">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'title'">
                    <div class="blog-title" @click="router.push({ name: 'blog', params: { id: record.id } })">
                        {{ record.title }}
                    </div>
                </template>

                <template v-if="column.dataIndex === 'username'">
                    <a-tag color="blue" :bordered="false">{{ record.username }}</a-tag>
                </template>

                <template v-if="column.dataIndex === 'tags'">
                    <a-tag v-for="tag in record.tags || []" :key="tag" color="pink">
                        {{ tag }}
                    </a-tag>
                </template>

                <template v-if="column.dataIndex === 'created_at'">
                    <span class="time-text">
                        {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm') }}
                    </span>
                </template>
            </template>
        </a-table>
    </div>
</template>

<style scoped>
.blog-list-container {
    padding: 24px;
    background-color: #fff;
    min-height: 100vh;
}

.header-container {
    margin-bottom: 24px;
}

.left-section {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.search-box {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 500px;
}

.category-tabs {
    margin-bottom: 16px;
}

.custom-table {
    border-radius: 8px;
    overflow: hidden;
}

.blog-title {
    cursor: pointer;
    transition: color 0.3s;
    font-weight: 500;
}

.blog-title:hover {
    text-decoration: underline;
}

.time-text {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}
</style>
